<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>添加事件</title>
	<link rel="stylesheet" href="/fission/css/layui.css">
	<style type="text/css">
		.pushSOP_main_contaienr{
			width: 571px;
			margin: 0 auto;
			padding: 32px 20px 32px 20px;
			background: #fff;
		}
		.pushSOP_title{
			font-size: 17px;
			width: 100%;
			margin-top: 2px;
			font-weight: 400;
			line-height: 24px;
			letter-spacing: 1px;
		}
		.pushSOP_button_content{
			display: flex;
			justify-content: flex-end;
			flex: 1;
			align-items: center;
		}
		.publishPopup_textLeft{
			text-align: left;
		}
		/*续费部分*/
		.RenewalsPopup_main_container{
			padding: 14px 30px;
		}
		.RenewalsPopup_mainDetail_container{

		}
		.RenewalsPopup_mainDetail_container li{
			display: flex;
			align-items: center;
			margin-bottom: 30px;
		}
		.RenewalsPopup_mainDetail_container li:last-child{
			margin-bottom: 0;
		}
		.RenewalsPopup_mainDetail_ListTitle{
			font-size: 14px;
			color: #606266;
			width: 60px;
			text-align: right;
			margin-right: 12px;
		}
		.RenewalsPopup_mainDetail_ListPrice{
			color: #e6a23c;
			font-size: 16px;
		}
		/* tips star*/
		.publishPopup_tips_contianer{
			background: #f4f4f5;
			border-radius: 5px;
			overflow: hidden;
			padding: 12px 24px;
			margin-top: 30px;
		}
		.publishPopup_tips_contianer h4{
			font-size: 14px;
			color: #909399;
			font-weight: bold;
			margin-bottom: 10px;
		}
		.publishPopup_tips_contianer p{
			font-size: 12px;
			color: #909399;
		}
		/* tips end*/
		/*步进器 star*/
		.RenewalsPopup_mainDetail_stepper_container{
			display: flex;
			align-items: center;
		}
		.RenewalsPopup_mainDetail_stepper_content{
			display: flex;
			align-items: center;
			border: 1px solid #ececec;
			border-radius: 3px;
			overflow: hidden;
		}
		.RenewalsPopup_mainDetail_stepper_content i{
			background: #f5f7fa;
			font-size: 14px;
			height: 38px;
			line-height: 38px;
			width: 38px;
			text-align: center;
			cursor: pointer;
		}
		.RenewalsPopup_mainDetail_stepper_content i:first-child{
			
		}
		.RenewalsPopup_mainDetail_stepper_content i:last-child{
			
		}
		.RenewalsPopup_mainDetail_stepper_content input{
			background: #fff;
			border-top: none;
			border-bottom: none;
			border-left: 1px solid #ececec;
			border-right: 1px solid #ececec;
			font-size: 14px;
			height: 38px;
			line-height: 38px;
			width: 98px;
			text-align: center;
		}
		.RenewalsPopup_mainDetail_stepper_container span{
			font-size: 14px;
			margin-left: 12px;
			color: #606266;
		}
		/*步进器 end*/
		/**/

	</style>
</head>
<body>
	<form class="layui-form" action="">
		<div class="pushSOP_main_contaienr">
			<h2 class="pushSOP_title publishPopup_textLeft">套餐购买</h2>
			<div class="publishPopup_tips_contianer">
				<h4>提示</h4>
				<p>购买套餐时间将会追加在所拥有的套餐之后，如需修改您的当前套餐类型，请联系管理员</p>
			</div>
			<div class="RenewalsPopup_main_container">
				<ul class="RenewalsPopup_mainDetail_container">
					<li>
						<span class="RenewalsPopup_mainDetail_ListTitle">账户余额</span>
						<b class="RenewalsPopup_mainDetail_ListPrice">￥<span id="balance">{$ua->balance}</span></b>
					</li>
					<li>
						<span class="RenewalsPopup_mainDetail_ListTitle">套餐类型</span>
						<div class="RenewalsPopup_mainDetail_select_container">
							<select id="city" lay-verify="required" lay-filter="setMeal">
							    <option value=""></option>
								{loop $rank_arr as $key=>$rank}
							    <option value="{$key}">{$rank}</option>
								{/loop}
							</select>
						</div>
					</li>
					<li>
						<span class="RenewalsPopup_mainDetail_ListTitle">套餐单价</span>
						<b class="RenewalsPopup_mainDetail_ListPrice" id="price">￥0</b>
					</li>
					<li>
						<span class="RenewalsPopup_mainDetail_ListTitle">购买时长</span>
						<div class="RenewalsPopup_mainDetail_stepper_container">
							<div class="RenewalsPopup_mainDetail_stepper_content">
								<i class="layui-icon layui-icon-subtraction" id="subtraction"></i>
								<input type="text" name="" disabled value="1" id="years">
								<i class="layui-icon layui-icon-addition" id="addition"></i>
							</div>
							<span>年</span>
						</div>
					</li>
					<li>
						<span class="RenewalsPopup_mainDetail_ListTitle">套餐总价</span>
						<b class="RenewalsPopup_mainDetail_ListPrice" id="setMealPrice">￥0</b>
					</li>
					<li id="spreads" style="display: none;">
						<span class="RenewalsPopup_mainDetail_ListTitle">说明</span>
						<b class="RenewalsPopup_mainDetail_ListPrice">需要补齐差价￥<span id="spread">0</span></b>
					</li>
				</ul>
			</div>
			<div class="layui-form-item">
				<div class="pushSOP_button_content">
					<!-- <button type="button" class="layui-btn layui-btn-primary" onclick="text('10')">取消</button> -->
					<button type="button" class="layui-btn layui-btn-normal">购买</button>
				</div>
			</div>
		</div>	
	</form>
	<script src="/layui/layui.js"></script>
	<script>
	//表单
	layui.use('form', function(){
		var form = layui.form;

	  //监听提交
	  form.on('submit(formDemo)', function(data){
	  	layer.msg(JSON.stringify(data.field));
	  	return false;
	  });
	  form.on("select(setMeal)", function(data){
	       	let vals = $('#years').val();	
	       	var price = data.value;
	       	if(!price){
	       		var prices = "0";
	       		$("#price").text("");
				$("#setMealPrice").text("");
				$("#price").append("￥0");
				$("#setMealPrice").append("￥0");
				$('#years').val("1")
	       	}else{
	       		ajax(location.href,{ price_id:price},function(m){
				    var lx = parseInt($('#city').val());
					$("#price").text("");
					$("#setMealPrice").text("");
					$("#price").append("￥"+"<span id='span_price'>"+m+"</span>");
					$("#setMealPrice").append("￥"+"<span id='span_zong'>"+m*vals+"</span>");
					$("#spread").text();
					$("#spreads").attr("style","display:none;");
					if(lx>{$ua->level_id}&&{$check}==1){
						var myfy = parseInt($('#span_price').text());
						var ys = parseInt($('#years').val());
						var a = myfy/365;//当前套餐的日价格
						var b = a*{$day_time};
						var c = parseInt(b-{$return_price});
						$("#spreads").attr("style","none");
						$("#span_zong").text(parseInt($("#span_zong").text())+parseInt(c));
						$("#spread").text(c);
					}
				})
	       	}
	  });
	});
</script>
<script src="/cdn/jquery.js"></script>
<script type="text/javascript">
	$("#addition").on("click",function(){
		var zong_price = $("#span_zong").text();
		var dan_price = $("#span_price").text();
		var id = $("#city").val();
		let vals = $('#years').val();
		if(!dan_price){
			tusi("请先选择套餐类型");
			return false;
		}
		$("#span_zong").text(parseInt(zong_price)+parseInt(dan_price));
		$('#years').val(Number(vals) + 1)
	})
	$("#subtraction").on("click",function(){
		var zong_price = $("#span_zong").text();
		var dan_price = $("#span_price").text();
		let vals = $('#years').val();
		if(!dan_price){
			tusi("请先选择套餐类型");
			return false;
		}
		if(vals <= 1){
			tusi("套餐购买时长不能低于一年");
			return false;
		}
		$("#span_zong").text(parseInt(zong_price)-parseInt(dan_price));
		$('#years').val(Number(vals)  - 1)
	})

	$(".layui-btn-normal").on("click",function(){
		let id = $("#city").val();	//套餐id
		let balance = $("#balance").text(); //账户余额
		let years = $('#years').val(); // 年数 分月数
		let dan_price = $('#span_price').text(); // 年数 分月数
		if(!id){
			tusi("请先选择套餐类型");
			return false;
		}
		if(balance < dan_price*years){
			tusi("你的账户余额不足，请充值");
			return false;
		}
		ajax(location.href,{ ys:years,lx:id},function(m){
			if(m=='no'){
				alert('请选择时间');
			}
			if(m=='tno'){
				alert('平台备用金不足，请联系管理员');
			}
			if(m=='ok'){
				tusi('升级成功');
			}
			setTimeout(function(){
				parent.location.href = parent.location.href;
			},1500);
		});
	})
</script>
</body>
</html>